<template>
  <div class="app-container flex-col minH">
    <div class="topline w100p bgwhite ptb20 radius10 pl10 pr20 justify-between">
      <div>
        <el-input v-model="title" style="width: 280px" placeholder="搜尋標題..." :prefix-icon="Search" class="search" />

      </div>
      <div class="noshrink">
        <el-button class="btn2" @click="search()">查詢</el-button>
        <el-button class="btn1" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="mt15 radius10 hidden pb15 flex1 bgwhite  flex-col w100p">
      <div class="flex1 w100p ">
        <el-table :data="tableData" style="width: 100%" cell-class-name="tbcell" header-cell-class-name="hdcell" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="title" label="標題" min-width="350" />
          <el-table-column prop="image" label="輪播圖" min-width="100">

            <template #default="scope">
              <el-avatar shape="square" :size="50" :fit="'cover'" :src="scope.row.image" />
            </template>
          </el-table-column>
          <el-table-column prop="is_show" label="是否展示" width="150">
            <template #default="scope">
              <el-switch :model-value="scope.row.is_show" class="ml-2" :active-value="1" :inactive-value="0" @change="changeStatus(scope.row)" style="--el-switch-on-color: #3a3f63; --el-switch-off-color: #dcdfe6" />
            </template>

          </el-table-column>
          <el-table-column prop="created_at" label="創建時間" min-width="200" />
          <el-table-column prop="updated_at" label="更新時間" min-width="200" sortable />
          <el-table-column prop="end_show" label="展示時間" min-width="200">
            <template #default="scope">
              {{ scope.row.start_show }}-{{ scope.row.end_show }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140" fixed="right">
            <template #default="scope">
              <div class=" pointer" @click="edit(scope.row)">編輯</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class=" justify-between plr20 w100p mt15">
        <div class="align-center">
          <el-button class="btn1" @click="toDel()">刪除</el-button>

          <el-button class="btn2" @click="toAdd()">新增</el-button>
        </div>
        <el-pagination v-model:current-page="currentPage" prev-text="上一頁" next-text="下一頁" :default-page-size="15" :small="small" :disabled="disabled" :background="true" layout="prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>


    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { swiperList, changeShow, deleteswiper } from '@/api/swiper.js'
const title = ref('')
onMounted(() => {
  getSwiperList(title.value)
})

let total = ref(0)
const value = ref('')
const value1 = ref('')
const value2 = ref('')
const value3 = ref(true)
const dialogType = ref(1)
let idStr = ref('')
const dialogVisible = ref(false)
const changeStatus = (row) => {
  console.log('参数', row.is_show)
  changeShow({
    id: row.id,
    is_show: row.is_show == 0 ? 1 : 0
  }).then((res) => {
    console.log('轮播图切换状态', res)
    getSwiperList(title.value)
  })
}
// 搜尋
const search = () => {
  getSwiperList(title.value)
}
// 重置
const reset = () => {
  title.value = ''
  getSwiperList(title.value)
}
const handleSelectionChange = (e) => {
  let idList = e.map((item, index) => { return item.id })
  idStr.value = idList.join(',')
  console.log(idList)



}
const dialogShow = (type) => {
  console.log('dialog----show----')
  dialogType.value = type
  dialogVisible.value = true
}
const formLabelAlign = reactive({
  name: '1',
  region: '',
  type: '',
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
let tableData = ref([])
const tableRowClassName = () => {
  return 'tbrow'
}
const currentPage = ref(1)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
// 获取轮播图列表
const getSwiperList = (title = '') => {
  let params = { page: currentPage.value }
  if (title) {
    params.title = title

  }
  swiperList(params).then((res) => {
    console.log('轮播图列表', res)
    tableData.value = res.data.data
    total.value = res.data.total
  })
}
const router = useRouter()
// 删除
const toDel = () => {
  deleteswiper({ id: idStr.value }).then((res) => {
    console.log('删除成功', res)
    getSwiperList(title.value)
  })
}
// 新增
const toAdd = () => {
  console.log(router)
  router.push({ path: 'addSwiper' })
}
const edit = (row) => {
  console.log(row)
  router.push({ path: 'editSwiper', query: row })
}
</script>

<style lang="scss" scoped>
.search {
  overflow: hidden;
  border-radius: 10px !important;
  // padding: 5px 0px;
}
</style>
<style scoped>
:deep(.el-input__wrapper) {
  box-shadow: none;
  border: none;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: none;
  border: none;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: none;
  border: none;
}
</style>
 